<template>
	<view class="Cluedetails-box">
		<view class="Cluedetails-top">
			<u-navbar :border-bottom="false" title="线索详情"  title-color="#333333" back-icon-color="#333333"></u-navbar>
		</view>
		<view class="Cluedetails-auto">
			<view class="information">
				<view class="Cluedetails-auto-text">XS004 周晓明 18079442429</view>
				<view class="Cluedetails-auto-distribute">当前状态：未分发</view>
			</view>
			<view class="Cluedetails">
				<view class="Cluedetails-writtenwords">
					<view class="Cluedetails-writtenwords-img">
						<u-icon size="40" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>
					</view>
					<view class="Cluedetails-writtenwords-text">
						线索详情
					</view>
				</view>
				<view class="Cluecontent">
					<view class="Cluecontent-box">
						<view class="Cluecontent-left">录单人</view>
						<view class="Cluecontent-right">市场</view>
					</view>
					<view class="Cluecontent-box" v-for="item in 10" >
						<view class="Cluecontent-left">意向专业</view>
						<view class="Cluecontent-right">语言培训/通用英语/成人新概念英语</view>
					</view>
					<view class="Cluecontent-box">
						<view class="Cluecontent-left">咨询其他机构</view>
						<view class="Cluecontent-right">否</view>
					</view>
				</view>
			</view>
		</view>
		<view class="Cluedetails-bottom">
			<view class="Cluedetails-bottom-completion" @click="completion">补全信息</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					cate_name: '回访记录'
				}, {
					cate_name: '分发机构'
				}],
				current: 0,
				id: '',
				detail: {}
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		mounted() {
			this.getDetail()
		},
		methods: {
			getDetail () {
				this.$request('', '/manageApi/v1/clueLine', 'GET', {
					id: this.id
				}, {
				}).then(res => {
					this.detail = res.data.data
				})
			},
			change(index) {
				this.current = index;
			},
			completion(){
				uni.navigateTo({
					url: '/pages/market/Cluemanagement/Clueentry'
				})
			}
		}
	}
</script>

<style>
	.Cluedetails-box{}
	.Cluedetails-top{}
	.Cluedetails-auto{}
	.information{
		color: #fff;
		padding: 30upx;
		padding-top: 90upx;
		height: 387upx;
		text-align: center;
		background-color: #91C853;
	}
	.Cluedetails-auto-text{
		font-size: 30upx;
		font-weight: bold;
	}
	.Cluedetails-auto-distribute{
		color: #F7FCFF;
		font-size: 24upx;
		margin-top: 22upx;
		font-weight: bold;
	}
	.Cluedetails{
		margin: 30upx;
		margin-bottom: 50upx;
		padding: 30upx 25upx;
		margin-top: -120upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 32px 0px rgba(153, 153, 153, 0.3);
		border-radius: 10upx;
	}
	.Cluedetails-writtenwords{
		display: flex;
		align-items: center;
	}
	.Cluedetails-writtenwords-img{
		font-size: 0;
	}
	.Cluedetails-writtenwords-text{
		margin-left: 15upx;
		font-size: 30upx;
		font-weight: bold;
		color: #91C853;
	}
	.Cluecontent{
		overflow: hidden;
		margin-top: 30upx;
		border-radius: 10upx;
		border: 1px solid #D2D2D2;
	}
	.Cluecontent-box{
		display: flex;
		align-items: center;
		background-color: #F8F8F8;
	}
	.Cluecontent-left{
		width: 30%;
		font-size: 26upx;
		font-weight: 500;
		color: #666666;
		padding: 20upx;
		border-bottom: 1px solid #F8F8F8;
	}
	.Cluecontent-right{
		width: 70%;
		padding: 20upx;
		font-size: 26upx;
		font-weight: 500;
		color: #333333;
		background-color: #fff;
		border-bottom: 1px solid #D2D2D2;
	}
	.Cluecontent-box:nth-last-child(1) .Cluecontent-left{
		border-bottom: 0;
	}
	.Cluecontent-box:nth-last-child(1) .Cluecontent-right{
		border-bottom: 0;
	}
	.Cluedetails-bottom{
		margin: 30upx;
		padding-bottom: 50upx;
	}
	.Cluedetails-bottom-completion{
		margin: 0 100upx;
		padding: 25upx 30upx;
		font-size: 26upx;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		letter-spacing: 2px;
		background: linear-gradient(112deg, #A8E266, #A8E266, #91C853);
		box-shadow: 0px 0px 20px 0px rgba(168, 221, 108, 0.9);
		border-radius: 10px;
	}
	.Cluedetails-box /deep/ .u-scroll-bar{
		background-color: #91C853 !important;
	}
</style>
